<template>
	<view>
		<view class="user_address">
			<i class="coolc icon-dizhi"></i>
			<view class="name">收货人：{{goodsinfo.user_info.username}}</view>
			<view class="mobile">{{goodsinfo.user_info.mobile}}</view>
			<view class="address">收货地址：{{goodsinfo.user_info.address}}</view>
		</view>
		<view class="row">
			<view class="seller_name"><i class="coolc icon-shangjialiebiaoicon"></i><span>{{goodsinfo.seller_name}}</span></view>
			<view class="order-info" v-for="(row,index) in goodsinfo.oder_goods" :key="index">
				<view class="left">
					<image :src="row.img"></image>
				</view>
				<view class="right">
					<view class="name">
						{{row.name}}
					</view>
					<view class="spec" v-if="row.spec">{{row.spec}}</view>
					<view class="price-number">
						￥<view class="price">{{row.univalent}}</view>
						x <view class="number">{{row.numner}}</view>
					</view>
				</view>
			</view>
			<view class="detail">
				<view class="number">共{{goodsinfo.order_sum}}件商品</view>
				<view class="detail_li"><span>运费</span><b>￥{{goodsinfo.order_freight}}</b></view>
				<view class="detail_li"><span>实付（含运费）</span><b class="price">￥{{goodsinfo.ordre_money}}</b></view>
			</view>
		</view>
		
		<view class="order_bg">
			<view class="order_li">订单编号：{{goodsinfo.orederno}}</view>
			<view class="order_li">创建时间：{{goodsinfo.order_time}}</view>
		</view>
		
		<!-- 底部菜单栏 -->
		<view class="action-section">
			<view class="btns">
				<view class="default">取消订单</view>
				<view class="pay">立即付款</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ImagesType: ['/static/img/icon/paid.webp','/static/img/icon/delivery.webp','/static/img/icon/payoff.webp','/static/img/icon/close.webp'], //已付款、已发货、待支付，已关闭
				stateType: ['已付款待发货','卖家已发货','待支付','订单已关闭'], //已付款、已发货、待支付，已关闭
				stateTips: ['您已付款等待商家发货','您的宝贝即将送达你的手中','你还未对订单进行支付','该订单已关闭'], //已付款、已发货、待支付，已关闭
				goodsinfo: {
					order_type : "1",
					order_no : "YMO_5c909751be6b8",
					order_time : "2019-03-19 15:16:33",
					order_pay : "2019-03-19 15:20:33",
					order_delivery : "2019-03-20 15:20:33",
					payment : "支付宝",
					order_freight : "20",
					ordre_money : "1852200.00",
					seller_name : "百达翡丽官方旗舰店",
					orederno : "YMO_5c909751be6b8",
					order_sum : "2",
					oder_goods : [{
						img: '/static/por5.jpg',
						name: '百达翡丽推出新款自动上弦万年历腕表，采用当代“复古”风格表壳',
						spec: '规格:S码',
						numner: '1',
						univalent: '605900.00'
					},
					{
						img: '/static/por6.jpg',
						name: '百达翡丽时计系列新型自动上弦万年历腕表',
						numner: '1',
						univalent: '305900.00'
					}],
					user_info :{
						username: '陈若萱',
						mobile: '180 0797 1768',
						address: '江西省赣州市兴国县兴国大道252号'
					}
				}
			}
		}
	}
</script>

<style lang="scss">
page{ background-color: #f4f4f4; }
.top_bg {
	width: 100%; height: 100%; background: linear-gradient(to right, rgb(255, 144, 0), rgb(255, 80, 0)) center center / cover no-repeat; position:relative; padding:36upx 34upx;
	.type_name { width:100%; height:40upx; line-height:40upx; overflow:hidden; font-size:$font-lg + 4upx; color:$bgcolor_white; font-weight:bold; }
	.tips { width:100%; font-size:$font-sm; color:$bgcolor_white; }
	.typeimg { height:162upx; position:absolute; right:10%; top:0upx; }
}
.user_address {
	width:100%; height:auto; display:table; border-bottom:15upx solid #f4f4f4; background:$bgcolor_white; padding:30upx 0; position:relative; padding-left:100upx;
	.coolc { width:100upx; height:100upx; line-height:100upx; font-size:70upx; color:$font-color-999; text-align:center; position:absolute; left:0px; top:30upx; }
	.mobile { position:absolute; right:30upx; top:30upx; font-size:$font-base; color:$font-color-999; }
	.address,.name { font-size:$font-base; color:$font-color-999; }
}
.row{
	width:calc(100%); padding:10upx 26upx; background-color:#fff; margin-bottom:15upx; position:relative;
	.seller_name {
		width:100%; height:80upx; color:$font-color-333; overflow:hidden; border-bottom:1px solid #eeeeee;
		.coolc { display:block; float:left; font-size:$font-lg + 10upx; padding-right:10upx; }
		span { display:block; float:left; font-size:$font-lg; line-height:70upx; }
	}
	.order-info{
		width:100%; display:flex; padding:20upx 0; border-bottom:1px solid #eeeeee;
		.left{
			flex-shrink:0; width:25vw; height:25vw;
			image{ width:25vw; height:25vw; border-radius:10upx; }
		}
		.right{
			width:100%; margin-left:10upx; position:relative;
			
			.name{ width:100%; font-size:28upx; line-height:36upx; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
			.spec{ color:#a7a7a7; font-size:$font-sm + 4upx; padding-top:5upx; }
			.price-number{
				position:absolute; bottom:0; width:100%; display:flex; justify-content:flex-end; font-size:$font-base; color:#333; display:flex; align-items:flex-end;
				.price{ font-size:$font-base; margin-right:5upx; }
			}
		}
	}
	.detail{
		width:100%; padding:20upx 0; display:flex; justify-content:flex-end; align-items:flex-end; height:auto; display:table; font-size:26upx;
		
		.number { width:100%; text-align:right; font-size:$font-base; }
		.detail_li {
			width:100%; height:50upx; font-size:$font-base; clear:both;
			span { display:block; float:left; }
			b { display:block; float:right; font-weight:500; }
		}
		.price{ font-size:30upx; color:#ff0000; }
	}
}
.order_bg {
	width:100%; height:auto; display:table; background:$bgcolor_white; padding:26upx; margin-bottom:125upx;
	.order_li { width:100%; height:50upx; line-height:50upx; font-size:$font-base; color:$font-color-999; }
}
/* 底部栏 */
.action-section{
	position:fixed; left:0upx; bottom:0upx; z-index:95; display:flex; align-items:center; width:750upx; height:110upx; padding:0 26upx; background:#ffffff; -webkit-box-shadow:0px -1px 5px #ccc; box-shadow:0px -1px 5px #ccc;
	.btns{
		width:100%; height:110upx; display:flex; align-items:center; justify-content:flex-end; text-align:right;
				
		view{ min-width:120upx; height:70upx; padding:0 36upx; border-radius:50upx; display:flex; justify-content:center; align-items:center; font-size:28upx; margin-left:20upx; }
		.default{ border:solid 1upx #ccc; color:#666; }
		.pay{ border:solid 1upx #ec652f; color:$bgcolor_white; background:#ec652f; }
	}
}
</style>